<template>
    <div class="dashboard-container">
      <div class="container">
        <div class="tableBar">
          <label style="margin-right: 10px">食材名称：</label>
          <el-input v-model="input"
          placeholder="请填写食材名称"
          style="width: 14%"
          clearable
          @clear="init"
          @keyup.enter.native="initFun" />
  
          <el-button class="normal-btn continue" @click="init(true)">
            查询
          </el-button>
  
          <div class="tableLab">
            <span class="delBut non" @click="deleteHandle('批量', null)"
              >批量删除</span>
            <el-button
              type="primary"
              style="margin-left: 15px"
              @click="addDishtype('add')"
            >
              + 新建食材
            </el-button>
          </div>
        </div>
        <el-table
  v-if="tableData.length"
  :data="tableData"
  stripe
  class="tableBox"
  @selection-change="handleSelectionChange"
>
  <el-table-column type="selection" width="25" />
  <el-table-column prop="name" label="食材名称" />
  <el-table-column prop="copies" label="菜品份数" />
  <el-table-column prop="entryTime" label="入库时间">
    <template slot-scope="scope">
        {{ formatDate(scope.row.entryTime) }}
    </template>
  </el-table-column>

<el-table-column prop="refreshingTime" label="过期时间">
    <template slot-scope="scope">
        {{ formatDate(scope.row.refreshingTime) }}
    </template>
</el-table-column>

<el-table-column prop="wareHouse.shelf" label="货架" />
  <el-table-column prop="wareHouse.line" label="行" />
  <el-table-column prop="wareHouse.column" label="列" />
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button
        type="text"
        size="small"
        class="blueBug"
        @click="addDishtype(scope.row.id)"
      >
        修改
      </el-button>
      <el-button
        type="text"
        size="small"
        class="delBut"
        @click="deleteHandle('单删', scope.row.id)"
      >
        删除
      </el-button>
    </template>
  </el-table-column>
</el-table>
        <Empty v-else :is-search="isSearch" />
        <el-pagination
          v-if="counts > 10"
          class="pageList"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import { getIngredient,deleteIngredient } from '@/api/ingredient'
  import Empty from '@/components/Empty/index.vue'
  import InputAutoComplete from '@/components/InputAutoComplete/index.vue'  
  import HeadLable from '@/components/HeadLable/index.vue'
  
  @Component({
    name: 'Ingredient',
    components: {
      Empty,
      HeadLable,
      InputAutoComplete,
    }
  })
  export default class extends Vue {
    private input: string = ''
    private counts: number = 0
    private page: number = 1
    private pageSize: number = 10
    private checkList: string[] = []
    private tableData: any[] = []
    private isSearch: boolean = false
  
    created() {
      this.init()
    }
  
    initFun() {
      this.page = 1
      this.init()
    }

    private formatDate(timestamp: number) {
        return new Date(timestamp).toLocaleString()
    }
  
    private async init(isSearch?: boolean) {
      this.isSearch = isSearch
      await getIngredient({
        page: this.page,
        pageSize: this.pageSize,
        name: this.input || undefined,
      })
        .then(res => {
          if (res.data.code === 1) {
            this.tableData = (res.data && res.data.data && res.data.data.records) || []
          }
        })
        .catch(err => {
          this.$message.error('请求出错了：' + err.message)
        })
    }
  
    // 添加/修改
 // Ingredient.vue 修改
    private addDishtype(id: string) {
    const path = id === 'add' ? '/ingredient/add' : '/ingredient/edit' // 区分路径
    this.$router.push({ 
        path, 
        query: { id: id === 'add' ? undefined : id } // 新增不传id
    })
    }
  
    // 删除
    private deleteHandle(type: string, id: any) {
      if (type === '批量' && id === null) {
        if (this.checkList.length === 0) {
          return this.$message.error('请选择删除对象')
        }
      }
      this.$confirm('确认删除该食材, 是否继续?', '确定删除', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里调用删除API
        deleteIngredient(type === '批量'? this.checkList.join(","):id)
            .then(res => {
                if(res && res.data && res.data.code === 1){
                    this.$message.success("删除成功!")
                    this.init()
                } else {
                    this.$message.error(res.data.msg)
                }
            })
            .catch(err => {
                this.$message.error("请求出错了：" + err.message)
            })
        
        this.init()
      })
    }
  
    // 选择项变化
    private handleSelectionChange(val: any[]) {
      this.checkList = val.map(item => item.id)
    }
  
    private handleSizeChange(val: number) {
      this.pageSize = val
      this.init()
    }
  
    private handleCurrentChange(val: number) {
      this.page = val
      this.init()
    }
  }
  </script>
  
  <style lang="scss">
  .el-table-column--selection .cell {
    padding-left: 10px;
  }
  </style>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
      .container {
        background: #fff;
        position: relative;
        z-index: 1;
        padding: 30px 28px;
        border-radius: 4px;
        //查询黑色按钮样式
        .normal-btn {
          background: #333333;
          color: white;
          margin-left: 20px;
        }
        .tableBar {
          margin-bottom: 20px;
  
          .tableLab {
            display: inline-block;
            float: right;
            span {
              cursor: pointer;
              display: inline-block;
              font-size: 14px;
              padding: 0 20px;
              color: $gray-2;
            }
          }
        }
        .tableBox {
          width: 100%;
          border: 1px solid $gray-5;
          border-bottom: 0;
        }
        .pageList {
          text-align: center;
          margin-top: 30px;
        }
      }
    }
  }
  </style>